import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Button, Typography, Space, List } from 'antd';
import { SettingOutlined, LogoutOutlined, LeftOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { logout } from '../store/slices/userSlice';

const { Title } = Typography;

const SettingsPage: React.FC = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const handleLogout = () => {
        // 1. 从 Local Storage 中移除 token
        localStorage.removeItem('userToken');

        // 2. 可选：移除其他用户相关的数据，例如用户信息
        localStorage.removeItem('userData');

        // 3. Dispatch logout action 更新 Redux 状态
        dispatch(logout());

        // 4. 重定向到登录页面或首页
        navigate('/login'); // 根据需要调整重定向路径
    };

    // 未来可能的设置项示例
    const settingsItems = [
        {
            title: '账号与安全',
            description: '修改密码、绑定手机等',
            onClick: () => { /* 导航到账户设置页面 */ },
        },
        {
            title: '隐私设置',
            description: '管理个人信息可见性等',
            onClick: () => { /* 导航到隐私设置页面 */ },
        },
        {
            title: '通知设置',
            description: '管理消息推送偏好',
            onClick: () => { /* 导航到通知设置页面 */ },
        },
        {
            title: '退出登录',
            description: '',
            onClick: handleLogout,
            danger: true, // 将退出登录按钮样式设置为 danger
        },
    ];

    return (
        <div style={{
            maxWidth: '620px',
            margin: '0 auto',
        }}>
            <Card title={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <LeftOutlined
                        style={{ marginRight: 16, cursor: 'pointer' }}
                        onClick={() => navigate(-1)}
                    />
                    <Title level={4} style={{ margin: 0 }}><SettingOutlined style={{ marginRight: 8 }} />设置</Title>
                </div>
            }>
                <List
                    itemLayout="horizontal"
                    dataSource={settingsItems}
                    renderItem={item => (
                        <List.Item
                            actions={[item.danger ?
                                <Button type="text" danger onClick={item.onClick} icon={<LogoutOutlined />}>退出登录</Button> :
                                <Button type="text" onClick={item.onClick}>管理</Button> // 示例 action 按钮
                            ]}
                            style={{ cursor: 'pointer' }}
                            onClick={item.onClick} // 允许点击整个列表项
                        >
                            <List.Item.Meta
                                title={item.title}
                                description={item.description}
                            />
                        </List.Item>
                    )}
                />
            </Card>
        </div>
    );
};

export default SettingsPage; 